import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    state = {
      count:100
    }
    add(){
      console.log("add",this)
      this.setState({
        // 更新数据是一个异步操作；大部分是异步操作，在原生事件中时是一个同步操作
        count:this.state.count+1
      })
      console.log(this.state.count)
    }
    minus(){
      console.log("minus",this)
      this.setState({
        count:--this.state.count
      })
    }
    add2 = ()=>{
      // this.setState({
      //   count:this.state.count++
      // })
      // console.log(this.state.count)
      // this.state.count++;
      // this.setState({})
      this.setState({
        count: this.state.count + 1
      },function(){
        // 数据更新完成之后会触发这个函数
        console.log(this.state.count)
      })
    }
    render() {
        // this.setState({}) 不能再render中编写 setState 因为setState会触发 render执行
        return <div className=''>
            <button onClick={this.add.bind(this)}>+</button>
            <button onClick={()=>{this.minus()}}>-</button>
            <button onClick={this.add2}>+</button>
            <h1>{this.state.count}</h1>
        </div>;
    }
}

ReactDOM.render(<App/>,document.getElementById('root'))